<!--
 * @Description: 
 * @Date: 2022-07-07 11:45:05
 * @LastEditTime: 2022-07-07 14:37:41
 * @FilePath: \jsnode\css\marginTest.html
-->
<!DOCTYPE html>
<html>

<head>
    <style>
        .comcss {
            background-color: green;
            width: 100px;
            height: 100px;
            color: #ffffff;
            text-align: center;
            border: 5px solid red;
        }

        .css1 {
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .css2 {
            margin-top: 50px;
        }

        .rowFle {
            background-color: #ffffff;
            margin-top: 50px;
            width: 150px;
            height: 150px;
            text-align: center;
        }

        .css3 {
            background-color: green;
            width: 100px;
            height: 100px;
            color: #ffffff;
            margin-top: 70px;
        }

        .css4 {
            background-color: blue;
            width: 50px;
            height: 50px;
            color: #ffffff;
            margin-top: 100px;
        }
    </style>
</head>

<body style="background-color: #909090;">
    <div>
        上下边距塌陷
        <div class="comcss css1">图形1</div>
        <div class="comcss css2">图形2</div>
    </div>
    <div class="rowFle">
        <div class="css3">
            <div class="css4">图形4</div>
        </div>
    </div>
</body>

</html>